﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Nevia</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/blue.css" id="colors">

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Java Script
================================================== -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.flexslider.js"></script>
<script src="scripts/jquery.selectnav.js"></script>
<script src="scripts/jquery.twitter.js"></script>
<script src="scripts/jquery.modernizr.js"></script>
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.contact.js"></script>
<script src="scripts/jquery.isotope.min.js"></script>
<script src="scripts/jquery.jcarousel.js"></script>
<script src="scripts/jquery.fancybox.min.js"></script>
<script src="scripts/jquery.layerslider.min.js"></script>
<script src="scripts/jquery.shop.js"></script>
<script src="scripts/custom.js"></script>

</head>
<body>

<!-- Wrapper / Start -->
<div id="wrapper">

<!-- Header
================================================== -->
<div id="top-line"></div>

<!-- 960 Container -->
<div class="container">

	<!-- Header -->
	<header id="header">

		<!-- Logo -->
		<div class="ten columns">
			<div id="logo">
				<h1><a href="index.html"><img src="images/logo.png" alt="Nevia Premium Template" /></a></h1>
				<div id="tagline">Template Without Compromises!</div>
				<div class="clearfix"></div>
			</div>
		</div>

		<!-- Social / Contact -->
		<div class="six columns">

			<!-- Social Icons -->
			<ul class="social-icons">
				<li class="twitter"><a href="#">Twitter</a></li>
				<li class="facebook"><a href="#">Facebook</a></li>
				<li class="dribbble"><a href="#">Dribbble</a></li>
				<li class="linkedin"><a href="#">LinkedIn</a></li>
				<li class="rss"><a href="#">RSS</a></li>
			</ul>

			<div class="clearfix"></div>

			<!-- Contact Details -->
			<div class="contact-details">Contact Phone: +48 880 440 110</div>

			<div class="clearfix"></div>

			<!-- Search -->
			<nav class="top-search">
				<form action="404-page.html" method="get">
					<button class="search-btn"></button>
					<input class="search-field" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search" />
				</form>
			</nav>

		</div>
	</header>
	<!-- Header / End -->

	<div class="clearfix"></div>

</div>
<!-- 960 Container / End -->


<!-- Navigation
================================================== -->
<nav id="navigation" class="style-1">

<div class="left-corner"></div>
<div class="right-corner"></div>

<ul class="menu" id="responsive">

	<li><a href="index.html"><i class="halflings white home"></i> Home</a></li>

	<li><a href="#"><i class="halflings white file"></i> Features</a>
		<!-- Mega Menu / Start -->
		<ul class="cols3">
			<li class="col3">
				<h4>Two Lists and a Paragraph</h4>
			</li>
			<li class="col1">
				<h5>Page Layouts</h5>
				<ol>
					<li><a href="about.html">About</a></li>
					<li><a href="flexslider.html">FlexSlider</a></li>
					<li><a href="pricing-tables.html">Pricing Tables</a></li>
					<li><a href="elements.html">Elements</a></li>
				</ol>
			</li>
			<li class="col1">
				<h5>Other Pages</h5>
				<ol>
					<li><a href="faq.html">FAQ's</a></li>
					<li><a href="404-page.html">404 Page</a></li>
					<li><a href="left-sidebar.html">Left Sidebar</a></li>
					<li><a href="right-sidebar.html">Right Sidebar</a></li>
				</ol>
			</li>
			<li class="col1">
				<h5>Paragraph</h5>
				<p>This <a href="#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p>
			</li>
		</ul>
		<!-- Mega Menu / End -->
	</li>

	<li><a href="#"><i class="halflings white cog"></i> Shortcodes</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="elements.html">Elements</a></li>
			<li><a href="icons.html">Icons</a></li>
			<li><a href="pricing-tables.html">Pricing Tables</a></li>
			<li><a href="typography.html">Typography</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="#"><i class="halflings white briefcase"></i> Portfolio</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="portfolio-2.html">2 Columns</a></li>
			<li><a href="portfolio-3.html">3 Columns</a></li>
			<li><a href="portfolio-4.html">4 Columns</a></li>
			<li><a href="single-project.html">Single Project</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>
	
	<li><a href="#" id="current"><i class="halflings white shopping-cart"></i> Shop</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="shop.html">Shop</a></li>
			<li><a href="product-page.html">Product Page</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="#"><i class="halflings white pencil"></i> Blog</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="blog-large-image.html">Large Image</a></li>
			<li><a href="blog-medium-image.html">Medium Image</a></li>
			<li><a href="blog-post.html">Single Post</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="contact.html"><i class="halflings white envelope"></i> Contact</a></li>

</ul>
</nav>
<div class="clearfix"></div>


<!-- Content
================================================== -->
<div id="content">


<!-- 960 Container -->
<div class="container floated">

	<div class="sixteen floated page-title">

		<h2>Product Page</h2>

		<nav id="breadcrumbs">
			<ul>
				<li>You are here:</li>
				<li><a href="index.html">Home</a></li>
				<li>Shop</li>
			</ul>
		</nav>

	</div>

</div>
<!-- 960 Container / End -->


<!-- 960 Container -->
<div class="container floated">

	<!-- Page Content -->
	<div class="eleven floated">
		<div class="shop-page page-content">

			<div class="six columns">
				<section class="flexslider shop">
					<ul class="slides">
						<li><a href="images/shop/shop-02a.jpg" rel="fancybox-gallery" title="Digital Camera #1"><img src="images/shop/shop-02a.jpg" alt="" /></a></li>
						<li><a href="images/shop/shop-02b.jpg" rel="fancybox-gallery" title="Digital Camera #2"><img src="images/shop/shop-02b.jpg" alt="" /></a></li>
					</ul>
				</section>
			</div>

			<div class="five columns">
				<div class="product-info">
					<h3 class="title">Digital Camera</h3>
					<span class="price">$499</span>
					<p>Etiam lobortis dolor eros sed lorem sodales imperdiet dapibus. Maecenas faucibus urna sed turpis lacinia consectetur. Mauris dolor bibendum nibh consectetuer.</p>

					<div class="product-amount">
						<input type="text" value="1"/>
						<div class="increase-value"><span class="icon-plus"></span></div>
					</div>
					
					<div class="clearfix"></div>
					
					<a href="#" class="button color">Add to Cart</a>
				</div>
			</div>
			
			<div class="clearfix"></div>
			<br />
			
			<div class="eleven columns">
				<!-- Tabs Navigation -->
				<ul class="tabs-nav">
					<li class="active"><a href="#tab1">Description</a></li>
					<li><a href="#tab2">Additional Information</a></li>
				</ul>

				<!-- Tabs Content -->
				<div class="tabs-container">
					<div class="tab-content" id="tab1">
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

						<p>
						<ul class="check-list">
							<li>Justo duo dolores et ea rebum</li>
							<li>Duis autem vel eum iriure dolor</li>
							<li>Stet clita kasd gubergren</li>
						</ul>
						</p>

						In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

					</div>

					<div class="tab-content" id="tab2">
						<table class="standard-table shop">

							<tr>
								<th>Length</th>
								<td>18cm</td>
							</tr>

							<tr>
								<th>Width</th>
								<td>13cm</td>
							</tr>

							<tr>
								<th>Height</th>
								<td>12cm</td>
							</tr>
							
							<tr>
								<th>Color</th>
								<td>Black</td>
							</tr>
							
							<tr>
								<th>Multiselect Attributes</th>
								<td>Camera Lenses, SRL Cameras</td>
							</tr>

						</table>
					</div>

				</div>
			</div>

			<div class="clearfix"></div>
			<div class="line" style="margin-top: 20px; margin-bottom: 30px;"></div>
			
			<!-- Related Products -->
			<div class="sixteen columns">
				<h3 style="margin-bottom: 10px;">Related Products</h3>
			</div>

			<!-- Shop Item -->
			<div class="four-shop columns">
				<div class="shop-item">
					<figure>
						<a href="#" class="badge"><img src="images/shop/shop-02.jpg" alt="" /></a>
						<figcaption class="item-description">
							<a href="#"><h5>Digital Photo Camera</h5></a>
							<span>$499</span>
							<a href="#" class="button color">Add to Cart</a>
						</figcaption>
					</figure>
				</div>
			</div>
			
			<!-- Shop Item -->
			<div class="four-shop columns">
				<div class="shop-item">
					<figure>
						<a href="#"><img src="images/shop/shop-01.jpg" alt="" /></a>
						<figcaption class="item-description">
							<a href="#"><h5>Mountain Bike</h5></a>
							<span>$399</span>
							<a href="#" class="button color">Add to Cart</a>
						</figcaption>
					</figure>
				</div>
			</div>

			<!-- Shop Item -->
			<div class="four-shop columns">
				<div class="shop-item">
					<figure>
						<a href="#"><img src="images/shop/shop-03.jpg" alt="" /></a>
						<figcaption class="item-description">
							<a href="#"><h5>Camera Lens</h5></a>
							<span>$129</span>
							<a href="#" class="button color">Add to Cart</a>
						</figcaption>
					</figure>
				</div>
			</div>
			<!-- Related Products / End -->
			
			<div class="clearfix"></div>
			<div style="margin-top: -10px;"></div>
	
		</div>
	</div>
	<!-- Page Content / End -->


	<!-- Sidebar -->
	<div class="four floated sidebar right">
		<aside class="sidebar">
		

			<!-- Cart -->
			<div class="widget" style="margin: -8px 0 0 0;">
				<h4>Shopping Cart</h4>
				<div id="cart">

				<ul class="cart-items">
					<li>
						<a href="#" class="cart-item-title">Digital Photo Camera</a>
						<span class="cart-item-amount"><a class="item-remove" href="#"><i class="icon-remove"></i></a> 1 x $499</span>
					</li>
				</ul>

				<span class="cart-subtotal">Subtotal: <strong>$499</strong></span>
				
				<a href="#" class="button light">View Cart</a>
				<a href="#" class="button color">Checkout</a>
				</div>
			</div>
			

			<!-- Empty Cart
			<div class="widget" style="margin: -8px 0 0 0;">
				<h4>Shopping Cart</h4>
				<div id="cart">
					<span class="empty-cart">Your cart is empty.</span>
				</div>
			</div> -->

			<!-- Categories -->
			<nav class="widget">
				<h4>Product Categories</h4>
				<ul class="categories">
					<li><a href="#">Mountain Bikes</a></li>
					<li><a href="#">Technology</a></li>
					<li><a href="#">Fashion Clothing</a></li>
					<li><a href="#">Photo Cameras</a></li>
				</ul>
			</nav>
			
			<!-- Popular -->
			<div class="widget">
				<h4>Popular Products</h4>

				<div class="latest-shop-items">
					<a href="#"><img src="images/shop-camera.png" alt="" /></a>
					<p><a href="#">Digital Photo Camera</a> <span>$499</span></p>
				</div>
				
				<div class="latest-shop-items">
					<a href="#"><img src="images/shop-backpack.png" alt="" /></a>
					<p><a href="#">Red Travel Backpack</a> <span>$99</span></p>
				</div>

				<div class="latest-shop-items">
					<a href="#"><img src="images/shop-bike.png" alt="" /></a>
					<p><a href="#">Black Sport Mountain Bike</a> <span>$399</span></p>
				</div>

			</div>


		</aside>
	</div>
	<!-- Sidebar / End -->

</div>
<!-- 960 Container / End -->

</div>
<!-- Content / End -->

</div>
<!-- Wrapper / End -->


<!-- Footer
================================================== -->

<!-- Footer / Start -->
<footer id="footer">
	<!-- 960 Container -->
	<div class="container">

		<!-- About -->
		<div class="four columns">
			<img id="logo-footer" src="images/logo-footer.png" alt="" />
			<p>Morbi gravida imperdiet rutrum fusce mattis, lectus consequat vestibulum, duinibh fermentum ligula.</p>
		</div>

		<!-- Contact Details -->
		<div class="four columns">
			<h4>Contact Details</h4>
			<ul class="contact-details-alt">
				<li><i class="halflings white map-marker"></i> <p><strong>Address:</strong> 123 Seward Street, Oklahoma City, USA</p></li>
				<li><i class="halflings white user"></i> <p><strong>Phone:</strong> +48 880 440 110</p></li>
				<li><i class="halflings white envelope"></i> <p><strong>Email:</strong> <a href="#">mail@example.com</a></p></li>
			</ul>
		</div>

		<!-- Photo Stream -->
		<div class="four columns">
			<h4>Photo Stream</h4>
			<div class="flickr-widget">
				<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=72179079@N00"></script>
				<div class="clearfix"></div>
			</div>
		</div>

		<!-- Twitter -->
		<div class="four columns">
			<h4>Twitter</h4>
			<ul id="twitter"></ul>
				<script type="text/javascript">
					jQuery(document).ready(function($){
					$.getJSON('http://api.twitter.com/1/statuses/user_timeline/vasterad.json?count=1&callback=?', function(tweets){
					$("#twitter").html(tz_format_twitter(tweets));
					}); });
				</script>
			<div class="clearfix"></div>
		</div>

	</div>
	<!-- 960 Container / End -->

</footer>
<!-- Footer / End -->


<!-- Footer Bottom / Start  -->
<footer id="footer-bottom">

	<!-- 960 Container -->
	<div class="container">

		<!-- Copyrights -->
		<div class="eight columns">
			<div class="copyright">
				© Copyright 2013 by <a href="#">Nevia</a>. All Rights Reserved.
			</div>
		</div>

		<!-- Menu -->
		<div class="eight columns">
			<nav id="sub-menu">
				<ul>
					<li><a href="#">FAQ's</a></li>
					<li><a href="#">Sitemap</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</div>

	</div>
	<!-- 960 Container / End -->

</footer>
<!-- Footer Bottom / End -->


<!-- Style Switcher
================================================== -->
<link rel="stylesheet" href="css/switcher.css">
<script src="scripts/switcher.js"></script>

<section id="style-switcher">
	<h2>Style Switcher <a href="#"></a></h2>
	<div>
	<h3>Predefined Colors</h3>
		<ul class="colors" id="color1">
			<li><a href="#" class="blue" title="Blue"></a></li>
			<li><a href="#" class="green" title="Green"></a></li>
			<li><a href="#" class="orange" title="Orange"></a></li>
			<li><a href="#" class="navy" title="Navy"></a></li>
			<li><a href="#" class="yellow" title="Yellow"></a></li>
			<li><a href="#" class="peach" title="Peach"></a></li>
			<li><a href="#" class="beige" title="Beige"></a></li>
			<li><a href="#" class="purple" title="Purple"></a></li>
			<li><a href="#" class="red" title="Red"></a></li>
			<li><a href="#" class="pink" title="Pink"></a></li>
			<li><a href="#" class="celadon" title="Celadon"></a></li>
			<li><a href="#" class="brown" title="Brown"></a></li>
			<li><a href="#" class="cherry" title="Cherry"></a></li>
			<li><a href="#" class="gray" title="Gray"></a></li>
			<li><a href="#" class="dark" title="Dark"></a></li>
			<li><a href="#" class="cyan" title="Cyan"></a></li>
			<li><a href="#" class="olive" title="Olive"></a></li>
			<li><a href="#" class="dirty-green" title="Dirty Green"></a></li>
		</ul>

	<h3>Menu Style</h3>
	<select id="menu-style">
		<option value="1">Style 1</option>
		<option value="2">Style 2</option>
	</select>

	<h3>Background Image</h3>
		 <ul class="colors bg" id="bg">
			<li><a href="#" class="bg1"></a></li>
			<li><a href="#" class="bg2"></a></li>
			<li><a href="#" class="bg3"></a></li>
			<li><a href="#" class="bg4"></a></li>
			<li><a href="#" class="bg5"></a></li>
			<li><a href="#" class="bg6"></a></li>
			<li><a href="#" class="bg7"></a></li>
			<li><a href="#" class="bg8"></a></li>
			<li><a href="#" class="bg9"></a></li>
			<li><a href="#" class="bg10"></a></li>
			<li><a href="#" class="bg11"></a></li>
			<li><a href="#" class="bg12"></a></li>
			<li><a href="#" class="bg13"></a></li>
			<li><a href="#" class="bg14"></a></li>
			<li><a href="#" class="bg15"></a></li>
			<li><a href="#" class="bg16"></a></li>
			<li><a href="#" class="bg17"></a></li>
			<li><a href="#" class="bg18"></a></li>
		</ul>
	</div>

	<div id="reset"><a href="#" class="button color blue">Reset</a></div>

</section>
<!-- Style Switcher / End -->


</body>
</html>